<!DOCTYPE html>
<!--
# Copyright (c) 2012-2021 Contributors to the Eclipse Foundation
# 
# See the NOTICE file(s) distributed with this work for additional
# information regarding copyright ownership.
# 
# This program and the accompanying materials are made available under the
# terms of the Eclipse Public License 2.0 which is available at
# http://www.eclipse.org/legal/epl-2.0
# 
# SPDX-License-Identifier: EPL-2.0
#
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Auto Remote</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/styles.css" rel="stylesheet">
  </head>

  <body onload="initRemote();">

    <div id="outerContainer">
		<div id="signinModal" class="modal show fade" style="width: 280px; margin-left: -140px; margin-top: 60px;">
			<div class="modal-body">
				<center>
				<h3 style="padding-bottom: 5px">Sign In</h3>
				<div class="input-prepend">
					<span class="add-on" style="width: 70px;">Driver</span>
					<input id="signinName" style="width: 130px;" type="text" value="Bob">
				</div>
				<div class="input-prepend">
					<span class="add-on" style="width: 70px;">Username</span>
					<input id="signinUsername" style="width: 130px;" type="text" value="" placeholder="(optional)">
				</div>
				<div class="input-prepend">
					<span class="add-on" style="width: 70px;">Password</span>
					<input id="signinPassword" style="width: 130px;" type="password" value="" placeholder="(optional)">
				</div>
				<hr style="margin: 10px">
				<div class="input-prepend">
					<span class="add-on" style="width: 70px;">Server</span>
					<input id="signinServer" style="width: 130px;" type="text" value="messagesight.demos.ibm.com">
				</div>
				<div class="input-prepend">
					<span class="add-on" style="width: 70px;">Port</span>
					<input id="signinPort" style="width: 130px;" type="text" value="1883">
				</div>
				</center>
			</div>
			<div class="modal-footer">
				<center>
				<a href="#" data-dismiss="modal" id="signinSubmit" class="btn btn-primary">Submit</a>
				</center>
			</div>
		</div>
		<div id="innerContainer">
			<div class="shadowBox" id="remotePage">
				<center>
					<div class="topbar">
						<span>AutoRemote</span>
					</div>
					<div class="clientStatus clientConnected"><small style="width: 320px;" class="text-right text-success">connected</small><small> to <span class="connectedTo"></span>'s car&nbsp;<i class="icon-ok-circle"></i></small></div>
					<div class="clientStatus clientConnectedNoCar"><small><span class="connectedTo"></span>'s car is not connected!</small></div>
					<div class="clientStatus clientDisconnected"><small class="text-right text-error">disconnected&nbsp;</small><i class="icon-ban-circle"></i></div>
					<div class="buttonContainer">
						<div class="buttonRow">
							<div class="buttonCell">
								<button type="button" id="startButton" class="requiresDisconnect btn btn-success">START</button>
							</div>
							<div class="buttonCell">
								<button type="button" id="stopButton" class="requiresDisconnect btn btn-danger">STOP</button>
							</div>
						</div>
						<div class="buttonRow">
							<div class="buttonCell">
								<button type="button" id="unlockButton" class="requiresDisconnect btn ">Unlock</button>
							</div>
							<div class="buttonCell">
								<button type="button" id="lockButton" class="requiresDisconnect btn ">Lock</button>
							</div>
						</div>
						<div class="buttonRow">
							<div class="buttonCell">
								<button type="button" id="hornButton" class="requiresDisconnect btn ">Horn</button>
							</div>
							<div class="buttonCell">
								<button type="button" id="alarmButton" class="requiresDisconnect btn ">Alarm</button>
							</div>
						</div>
						<div class="buttonRow">
							<div class="buttonCell">
								<p style="margin-bottom: -5px;">Climate Control</p>
								<div class="input-prepend input-append">
									<button class="btn tempDown"><i class="icon-arrow-down"></i></button>
									<input class="text" id="tempValue" style="text-align: center; width: 45px; height: 24px" value="75&deg;"></input>
									<button class="btn tempUp"><i class="icon-arrow-up"></i></button>
								</div>
							</div>
						</div>
					</div>
					<div id="controlTopicContainer">
						<p style="padding-top: 12px;">Control Topic:</p>
						<code id="controlTopic"></code>
						&nbsp;
					</div>
				</center>
			</div>
		</div>
	</div>

    <!-- Placed at the end of the document so the pages load faster -->
	<script src="js/utils/jquery.min.js"></script>
	<script src="js/utils/bootstrap.min.js"></script>
	<script src="js/utils/mqttws31.js"></script>
	<script src="js/RemoteApp.js"></script>

  </body>
</html>

